<template>
  <div class="message-container user">
    <img
      src="https://p2.music.126.net/hX_q-eNSWTKRtyw7C0Xbvg==/109951169521651103.jpg?param=30y30"
      alt=""
      class="avatar"
    />
    <div class="message">{{ props.content }}</div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  content: string;
}>();
</script>

<style scoped>
.message-container {
  margin: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;

  .avatar {
    border-radius: 6px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 15px;
  }
}

.user {
  color: #05073b;
}

.message {
  color: #05073b;
  font-size: 12px;
  line-height: 1.5;
}
</style>
